ஜாவாஸ்கிரிப்ட் குறியீடு தர டாஷ்போர்டு: அளவீடுகள், காட்சிப்படுத்தல் மற்றும் போக்கு பகுப்பாய்வு

இன்றைய வேகமான மென்பொருள் மேம்பாட்டு சூழலில், நம்பகமான, அளவிடக்கூடிய மற்றும் பராமரிக்கக்கூடிய பயன்பாடுகளை உருவாக்குவதற்கு உயர் குறியீட்டுத் தரத்தை பராமரிப்பது மிகவும் முக்கியமானது. ஒரு ஜாவாஸ்கிரிப்ட் குறியீடு தர டாஷ்போர்டு முக்கிய அளவீடுகளின் ஒரு மையப்படுத்தப்பட்ட பார்வையை வழங்குகிறது, இது மேம்பாட்டுக் குழுக்கள் முன்னேற்றத்தைக் கண்காணிக்கவும், சாத்தியமான சிக்கல்களைக் கண்டறியவும் மற்றும் அவர்களின் குறியீட்டுத் தளத்தை மேம்படுத்த தரவு சார்ந்த முடிவுகளை எடுக்கவும் உதவுகிறது. இந்த விரிவான வழிகாட்டி ஒரு குறியீட்டுத் தர டாஷ்போர்டைப் பயன்படுத்துவதன் நன்மைகள், கண்காணிக்க வேண்டிய அத்தியாவசிய அளவீடுகள் மற்றும் பிரபலமான கருவிகள் மற்றும் நுட்பங்களைப் பயன்படுத்தி ஒன்றை எவ்வாறு செயல்படுத்துவது என்பதற்கான நடைமுறை எடுத்துக்காட்டுகளை ஆராய்கிறது.

ஜாவாஸ்கிரிப்ட் குறியீடு தர டாஷ்போர்டை ஏன் செயல்படுத்த வேண்டும்?

நன்கு வடிவமைக்கப்பட்ட ஒரு குறியீட்டுத் தர டாஷ்போர்டு பல குறிப்பிடத்தக்க நன்மைகளை வழங்குகிறது:

• மேம்படுத்தப்பட்ட குறியீடு பராமரிப்புத்தன்மை: சைக்ளோமேடிக் சிக்கலான தன்மை மற்றும் குறியீடு நகல் போன்ற அளவீடுகளைக் கண்காணிப்பதன் மூலம், குழுக்கள் புரிந்துகொள்வதற்கும் பராமரிப்பதற்கும் கடினமான பகுதிகளை அடையாளம் காணலாம், இது குறியீட்டை மறுசீரமைக்கவும் எளிமைப்படுத்தவும் அனுமதிக்கிறது.
• குறைக்கப்பட்ட தொழில்நுட்ப கடன்: டாஷ்போர்டு குறியீடு வாசனைகள், பாதிப்புகள் மற்றும் பிற தொழில்நுட்ப கடன் சிக்கல்களை முன்னிலைப்படுத்துகிறது, இது குழுக்கள் பெரிய சிக்கல்களுக்கு வழிவகுக்கும் முன் அவற்றுக்கு முன்னுரிமை அளித்து தீர்க்க உதவுகிறது.
• மேம்படுத்தப்பட்ட குறியீடு பாதுகாப்பு: அறியப்பட்ட பாதிப்புகளின் எண்ணிக்கை மற்றும் பாதுகாப்பு ஹாட்ஸ்பாட்கள் போன்ற பாதுகாப்பு தொடர்பான அளவீடுகள், குழுக்கள் சாத்தியமான பாதுகாப்பு அபாயங்களைக் கண்டறிந்து தணிக்க உதவுகின்றன.
• அதிகரிக்கப்பட்ட மேம்பாட்டுத் திறன்: குறியீட்டுத் தரத்தின் தெளிவான படத்தைக் கொடுப்பதன் மூலம், டாஷ்போர்டு குழுக்கள் அதிக கவனம் தேவைப்படும் பகுதிகளில் தங்கள் முயற்சிகளைச் செலுத்த உதவுகிறது, இது வேகமான மேம்பாட்டுச் சுழற்சிகள் மற்றும் குறைவான பிழைகளுக்கு வழிவகுக்கிறது.
• தரவு சார்ந்த முடிவெடுத்தல்: டாஷ்போர்டு முன்னேற்றத்தைக் கண்காணிக்கவும், குறியீட்டு மாற்றங்களின் தாக்கத்தை மதிப்பிடவும் மற்றும் குறியீட்டுத் தர மேம்பாடுகள் குறித்த தகவலறிந்த முடிவுகளை எடுக்கவும் பயன்படுத்தக்கூடிய புறநிலைத் தரவை வழங்குகிறது.
• மேம்படுத்தப்பட்ட குழு ஒத்துழைப்பு: ஒரு பகிரப்பட்ட டாஷ்போர்டு குழு உறுப்பினர்களிடையே வெளிப்படைத்தன்மை மற்றும் ஒத்துழைப்பை ஊக்குவிக்கிறது, குறியீட்டுத் தரத்திற்கு உரிமை எடுத்துக்கொண்டு அதை மேம்படுத்த ஒன்றிணைந்து செயல்பட அவர்களை ஊக்குவிக்கிறது.

உங்கள் ஜாவாஸ்கிரிப்ட் குறியீடு தர டாஷ்போர்டில் கண்காணிக்க வேண்டிய முக்கிய அளவீடுகள்

உங்கள் டாஷ்போர்டில் நீங்கள் கண்காணிக்கும் குறிப்பிட்ட அளவீடுகள் உங்கள் திட்டத்தின் தேவைகள் மற்றும் குறிக்கோள்களைப் பொறுத்தது. இருப்பினும், சில பொதுவான மற்றும் அத்தியாவசிய அளவீடுகள் பின்வருமாறு:

1. குறியீடு கவரேஜ்

குறியீடு கவரேஜ் என்பது உங்கள் குறியீட்டுத் தளத்தின் எத்தனை சதவீதம் தானியங்கு சோதனைகளால் உள்ளடக்கப்பட்டுள்ளது என்பதைக் குறிக்கிறது. இது உங்கள் சோதனை உத்தியின் முழுமையைப் பற்றிய நுண்ணறிவை வழங்குகிறது மற்றும் போதுமான அளவு சோதிக்கப்படாத பகுதிகளை அடையாளம் காண உதவுகிறது.

• ஸ்டேட்மெண்ட் கவரேஜ்: உங்கள் குறியீட்டில் உள்ள ஸ்டேட்மென்ட்களின் சதவீதம், சோதனைகளால் செயல்படுத்தப்பட்டுள்ளது.
• பிரான்ச் கவரேஜ்: உங்கள் குறியீட்டில் உள்ள பிரான்ச்களின் (எ.கா., if/else ஸ்டேட்மென்ட்கள்) சதவீதம், சோதனைகளால் செயல்படுத்தப்பட்டுள்ளது.
• ஃபங்ஷன் கவரேஜ்: உங்கள் குறியீட்டில் உள்ள ஃபங்ஷன்களின் சதவீதம், சோதனைகளால் அழைக்கப்பட்டுள்ளது.

உதாரணம்: 80% ஸ்டேட்மெண்ட் கவரேஜ் கொண்ட ஒரு திட்டம் என்பது, குறியீட்டின் 80% வரிகள் சோதனையின் போது செயல்படுத்தப்பட்டுள்ளன என்பதாகும். அதிக குறியீடு கவரேஜை இலக்காகக் கொள்வது பொதுவாக ஒரு நல்ல நடைமுறை, ஆனால் கவரேஜ் மட்டுமே உங்கள் சோதனைகளின் தரத்திற்கு உத்தரவாதம் அளிக்காது என்பதை நினைவில் கொள்வது அவசியம். சோதனைகள் நன்கு எழுதப்பட்டிருக்க வேண்டும் மற்றும் முக்கியமான எட்ஜ் கேஸ்களை உள்ளடக்க வேண்டும்.

2. சைக்ளோமேடிக் சிக்கலான தன்மை

சைக்ளோமேடிக் சிக்கலான தன்மை ஒரு நிரலின் மூலக் குறியீடு வழியாக நேரியல் சுயாதீன பாதைகளின் எண்ணிக்கையை அளவிடுகிறது. இது குறியீட்டின் சிக்கலான தன்மை மற்றும் அதைப் புரிந்துகொண்டு பராமரிக்கத் தேவையான முயற்சி பற்றிய அறிகுறியை வழங்குகிறது. அதிக சைக்ளோமேடிக் சிக்கலான தன்மை பெரும்பாலும் சோதிக்கக் கடினமான மற்றும் பிழைகளுக்கு ஆளாகக்கூடிய குறியீட்டைக் குறிக்கிறது.

உதாரணம்: சைக்ளோமேடிக் சிக்கலான தன்மை 1 உள்ள ஒரு ஃபங்ஷன் அதன் குறியீடு வழியாக ஒரே ஒரு பாதையை மட்டுமே கொண்டுள்ளது (எ.கா., ஒரு எளிய ஸ்டேட்மென்ட்கள் வரிசை). சைக்ளோமேடிக் சிக்கலான தன்மை 5 உள்ள ஒரு ஃபங்ஷன் ஐந்து சுயாதீன பாதைகளைக் கொண்டுள்ளது, இது மிகவும் சிக்கலான கட்டுப்பாட்டு ஓட்டத்தைக் குறிக்கிறது. பொதுவாக, சைக்ளோமேடிக் சிக்கலான தன்மை 10 க்கு மேல் உள்ள ஃபங்ஷன்கள் கவனமாக மதிப்பாய்வு செய்யப்பட்டு, மறுசீரமைக்கப்பட வேண்டும்.

3. குறியீடு நகல்

குறியீடு நகல் (குறியீடு குளோன்கள் என்றும் அழைக்கப்படுகிறது) என்பது ஒரே அல்லது மிகவும் ஒத்த குறியீடு உங்கள் குறியீட்டுத் தளத்தில் பல இடங்களில் தோன்றும் போது ஏற்படுகிறது. நகல் எடுக்கப்பட்ட குறியீடு பிழைகளின் அபாயத்தை அதிகரிக்கிறது, குறியீட்டைப் பராமரிப்பதை கடினமாக்குகிறது மற்றும் முரண்பாடுகளுக்கு வழிவகுக்கும். குறியீடு நகலை அடையாளம் கண்டு நீக்குவது குறியீட்டுத் தரத்தை மேம்படுத்துவதில் ஒரு முக்கியமான படியாகும்.

உதாரணம்: ஒரே 10 வரிகள் கொண்ட குறியீட்டுத் தொகுதி மூன்று வெவ்வேறு ஃபங்ஷன்களில் மீண்டும் மீண்டும் காணப்பட்டால், இது குறியீடு நகலைக் குறிக்கிறது. நகல் எடுக்கப்பட்ட தர்க்கத்தை ஒரு மறுபயன்பாட்டு ஃபங்ஷனாக பிரித்தெடுப்பதன் மூலம் பராமரிப்புத்தன்மையை கணிசமாக மேம்படுத்த முடியும்.

4. குறியீடு வாசனைகள்

குறியீடு வாசனைகள் உங்கள் குறியீட்டில் உள்ள ஆழமான சிக்கல்களின் மேற்பரப்பு அறிகுறிகளாகும். அவை பிழைகள் அல்ல, ஆனால் அவை மோசமான வடிவமைப்பு தேர்வுகள் அல்லது மோசமான குறியீட்டு நடைமுறைகளைக் குறிக்கலாம். பொதுவான குறியீடு வாசனைகளின் எடுத்துக்காட்டுகள்:

• நீண்ட முறைகள்/ஃபங்ஷன்கள்: மிகவும் நீளமாகவும் சிக்கலாகவும் உள்ள ஃபங்ஷன்கள்.
• பெரிய வகுப்புகள்: அதிக பொறுப்புகளைக் கொண்ட வகுப்புகள்.
• நகல் குறியீடு: பல இடங்களில் மீண்டும் மீண்டும் வரும் குறியீடு.
• சோம்பேறி வகுப்பு: மிகக் குறைவாகச் செய்யும் ஒரு வகுப்பு.
• டேட்டா கிளம்ப்கள்: அடிக்கடி ஒன்றாகத் தோன்றும் தரவுக் குழுக்கள்.

உதாரணம்: பல வேறுபட்ட பணிகளைச் செய்யும் ஒரு ஃபங்ஷன் ஒரு நீண்ட முறையாகக் கருதப்படலாம். அந்த ஃபங்ஷனை சிறிய, அதிக கவனம் செலுத்தும் ஃபங்ஷன்களாக உடைப்பது வாசிப்புத்திறன் மற்றும் பராமரிப்புத்தன்மையை மேம்படுத்தும்.

5. பாதுகாப்பு பாதிப்புகள்

பாதுகாப்பு பாதிப்புகள் உங்கள் குறியீட்டில் உள்ள குறைபாடுகளாகும், அவை உங்கள் பயன்பாட்டை சமரசம் செய்ய தாக்குபவர்களால் பயன்படுத்தப்படலாம். உங்கள் பயன்பாட்டை தாக்குதல்களிலிருந்து பாதுகாக்க பாதுகாப்பு பாதிப்புகளைக் கண்காணிப்பது அவசியம். ஜாவாஸ்கிரிப்ட் பயன்பாடுகளில் பொதுவான பாதுகாப்பு பாதிப்புகள் பின்வருமாறு:

• கிராஸ்-சைட் ஸ்கிரிப்டிங் (XSS): உங்கள் பயன்பாட்டில் தீங்கிழைக்கும் ஸ்கிரிப்ட்களைச் செலுத்தும் தாக்குதல்கள்.
• SQL இன்ஜெக்ஷன்: உங்கள் தரவுத்தள வினவல்களில் தீங்கிழைக்கும் SQL குறியீட்டைச் செலுத்தும் தாக்குதல்கள்.
• கிராஸ்-சைட் ரிக்வெஸ்ட் ஃபோர்ஜரி (CSRF): பயனர்கள் செய்ய விரும்பாத செயல்களைச் செய்ய அவர்களை ஏமாற்றும் தாக்குதல்கள்.
• புரோட்டோடைப் பொல்யூஷன்: ஜாவாஸ்கிரிப்ட் புரோட்டோடைப்களைக் கையாண்டு, பயன்பாட்டின் நடத்தையைப் பாதிக்கக்கூடிய பண்புகள் மற்றும் முறைகளைச் செலுத்துதல்.
• சார்புநிலை பாதிப்புகள்: உங்கள் பயன்பாடு பயன்படுத்தும் மூன்றாம் தரப்பு நூலகங்கள் மற்றும் கட்டமைப்புகளில் உள்ள பாதிப்புகள்.

உதாரணம்: ஒரு பிரபலமான ஜாவாஸ்கிரிப்ட் நூலகத்தின் பாதிப்புக்குள்ளான பதிப்பைப் பயன்படுத்துவது உங்கள் பயன்பாட்டை அறியப்பட்ட பாதுகாப்பு சுரண்டல்களுக்கு வெளிப்படுத்தலாம். உங்கள் சார்புநிலைகளை பாதிப்புகளுக்காக தவறாமல் ஸ்கேன் செய்து அவற்றை சமீபத்திய பதிப்புகளுக்குப் புதுப்பிப்பது ஒரு முக்கியமான பாதுகாப்பு நடைமுறையாகும்.

6. தொழில்நுட்ப கடன்

தொழில்நுட்ப கடன் என்பது, அதிக நேரம் எடுக்கும் ஒரு சிறந்த அணுகுமுறையைப் பயன்படுத்துவதற்குப் பதிலாக, இப்போது ஒரு எளிதான தீர்வைத் தேர்ந்தெடுப்பதால் ஏற்படும் மறுவேலையின் மறைமுகச் செலவைக் குறிக்கிறது. மென்பொருள் மேம்பாட்டில் சில தொழில்நுட்ப கடன் தவிர்க்க முடியாதது என்றாலும், அது குவிந்து உங்கள் திட்டத்தின் பராமரிப்புத்தன்மை மற்றும் அளவிடுதிறனை எதிர்மறையாகப் பாதிப்பதைத் தடுக்க அதைக் கண்காணித்து நிர்வகிப்பது முக்கியம்.

உதாரணம்: ஒரு காலக்கெடுவை சந்திக்க விரைவான மற்றும் அழுக்கான தற்காலிக தீர்வைப் பயன்படுத்துவது தொழில்நுட்ப கடனை அறிமுகப்படுத்தலாம். அந்த தற்காலிக தீர்வை ஆவணப்படுத்தி, பின்னர் குறியீட்டை மறுசீரமைக்க நேரம் ஒதுக்குவது இந்த கடனை நிர்வகிக்க உதவும்.

7. பராமரிப்புத்தன்மை குறியீட்டெண்

பராமரிப்புத்தன்மை குறியீட்டெண் (MI) என்பது ஒரு கூட்டு அளவீடு ஆகும், இது மென்பொருளை எவ்வளவு எளிதாகப் பராமரிக்க முடியும் என்பதைக் கணக்கிட முயற்சிக்கிறது. இது பொதுவாக சைக்ளோமேடிக் சிக்கலான தன்மை, குறியீட்டின் அளவு மற்றும் ஹால்ஸ்டெட் அளவு போன்ற காரணிகளைக் கருத்தில் கொள்கிறது. அதிக MI மதிப்பெண் பொதுவாக அதிக பராமரிக்கக்கூடிய குறியீட்டைக் குறிக்கிறது.

உதாரணம்: 100 க்கு நெருக்கமான MI மதிப்பெண் மிகவும் பராமரிக்கக்கூடிய குறியீட்டைக் குறிக்கிறது, அதே நேரத்தில் 0 க்கு நெருக்கமான மதிப்பெண் பராமரிக்கக் கடினமான குறியீட்டைக் குறிக்கிறது.

8. குறியீட்டு வரிகள் (LOC)

தரத்தின் நேரடி குறிகாட்டியாக இல்லாவிட்டாலும், மற்ற அளவீடுகளைப் பகுப்பாய்வு செய்யும் போது குறியீட்டு வரிகளின் எண்ணிக்கை சூழலை வழங்க முடியும். எடுத்துக்காட்டாக, அதிக சைக்ளோமேடிக் சிக்கலான தன்மை கொண்ட ஒரு பெரிய ஃபங்ஷன், அதே சிக்கலான தன்மை கொண்ட ஒரு சிறிய ஃபங்ஷனை விட அதிக கவலைக்குரியது.

உதாரணம்: வெவ்வேறு மாட்யூல்களின் LOC-ஐ ஒப்பிடுவது, மறுசீரமைப்பு அல்லது குறியீட்டைப் பிரிப்பதன் மூலம் பயனடையக்கூடிய பகுதிகளை அடையாளம் காண உதவும்.

உங்கள் ஜாவாஸ்கிரிப்ட் குறியீடு தர டாஷ்போர்டை உருவாக்குதல்

ஒரு ஜாவாஸ்கிரிப்ட் குறியீடு தர டாஷ்போர்டை உருவாக்க பல அணுகுமுறைகள் உள்ளன:

1. SonarQube-ஐப் பயன்படுத்துதல்

SonarQube என்பது குறியீட்டுத் தரத்தை தொடர்ச்சியாக ஆய்வு செய்வதற்கான ஒரு பரவலாகப் பயன்படுத்தப்படும் திறந்த மூல தளமாகும். இது ஜாவாஸ்கிரிப்ட் உட்பட பல நிரலாக்க மொழிகளை ஆதரிக்கிறது மற்றும் குறியீட்டுத் தர அளவீடுகளின் விரிவான பகுப்பாய்வை வழங்குகிறது.

உங்கள் ஜாவாஸ்கிரிப்ட் திட்டத்துடன் SonarQube-ஐ ஒருங்கிணைப்பதற்கான படிகள்:

1. SonarQube-ஐ நிறுவி உள்ளமைக்கவும்: SonarQube சேவையகத்தைப் பதிவிறக்கி நிறுவி, அதை உங்கள் திட்டத்தின் களஞ்சியத்துடன் இணைக்க உள்ளமைக்கவும்.
2. SonarScanner-ஐ நிறுவவும்: உங்கள் குறியீட்டைப் பகுப்பாய்வு செய்து முடிவுகளை SonarQube சேவையகத்திற்கு அனுப்பப் பயன்படுத்தப்படும் SonarScanner கட்டளை வரி கருவியை நிறுவவும்.
3. SonarScanner-ஐ உள்ளமைக்கவும்: உங்கள் திட்டத்தின் மூல கோப்பகத்தில் ஒரு `sonar-project.properties` கோப்பை உருவாக்கி, உங்கள் திட்டத்தின் விவரங்களுடன் SonarScanner-ஐ உள்ளமைக்கவும்.
4. பகுப்பாய்வை இயக்கவும்: உங்கள் குறியீட்டைப் பகுப்பாய்வு செய்ய SonarScanner கட்டளையை இயக்கவும்.
5. முடிவுகளைப் பார்க்கவும்: பகுப்பாய்வு முடிவுகளைப் பார்க்கவும் மற்றும் குறியீட்டுத் தர அளவீடுகளைக் கண்காணிக்கவும் SonarQube வலை இடைமுகத்தை அணுகவும்.

எடுத்துக்காட்டு `sonar-project.properties` கோப்பு:

sonar.projectKey=my-javascript-project
sonar.projectName=My JavaScript Project
sonar.projectVersion=1.0

sonar.sources=src
sonar.javascript.linter.eslint.reportPaths=eslint-report.json
sonar.javascript.jstest.reportsPath=coverage/lcov.info

2. ESLint மற்றும் பிற லின்டர்களைப் பயன்படுத்துதல்

ESLint என்பது ஒரு பிரபலமான ஜாவாஸ்கிரிப்ட் லின்டர் ஆகும், இது குறியீட்டு நடைப் பிரச்சினைகள், சாத்தியமான பிழைகள் மற்றும் குறியீடு வாசனைகளைக் கண்டறிந்து சரிசெய்ய உதவுகிறது. JSHint மற்றும் StandardJS போன்ற பிற லின்டர்களையும் பயன்படுத்தலாம்.

உங்கள் திட்டத்துடன் ESLint-ஐ ஒருங்கிணைப்பதற்கான படிகள்:

1. ESLint-ஐ நிறுவவும்: npm அல்லது yarn ஐப் பயன்படுத்தி உங்கள் திட்டத்தில் ஒரு வளர்ச்சி சார்புநிலையாக ESLint-ஐ நிறுவவும்: `npm install --save-dev eslint` அல்லது `yarn add --dev eslint`.
2. ESLint-ஐ உள்ளமைக்கவும்: உங்கள் விருப்பமான விதிகளுடன் ESLint-ஐ உள்ளமைக்க உங்கள் திட்டத்தின் மூல கோப்பகத்தில் ஒரு `.eslintrc.js` அல்லது `.eslintrc.json` கோப்பை உருவாக்கவும்.
3. ESLint-ஐ இயக்கவும்: உங்கள் குறியீட்டைப் பகுப்பாய்வு செய்ய ESLint-ஐ இயக்கவும்: `eslint .`
4. ESLint-ஐ தானியக்கமாக்குங்கள்: உங்கள் குறியீட்டை தானாகவே சிக்கல்களுக்குச் சரிபார்க்க உங்கள் உருவாக்க செயல்முறை அல்லது IDE இல் ESLint-ஐ ஒருங்கிணைக்கவும்.

எடுத்துக்காட்டு `.eslintrc.js` கோப்பு:

module.exports = {
  env: {
    browser: true,
    es2021: true,
    node: true,
  },
  extends: [
    'eslint:recommended',
    'plugin:react/recommended',
  ],
  parserOptions: {
    ecmaFeatures: {
      jsx: true,
    },
    ecmaVersion: 12,
    sourceType: 'module',
  },
  plugins: [
    'react',
  ],
  rules: {
    'no-unused-vars': 'warn',
    'no-console': 'warn',
    'react/prop-types': 'off',
  },
};

ESLint முடிவுகளைக் காட்சிப்படுத்துதல்: நீங்கள் ESLint இலிருந்து அறிக்கைகளை உருவாக்கி அவற்றை உங்கள் டாஷ்போர்டில் காட்டலாம். `eslint-json` போன்ற கருவிகள் ESLint வெளியீட்டை காட்சிப்படுத்தலுக்கு ஏற்ற JSON வடிவத்திற்கு மாற்ற உதவும்.

3. குறியீடு கவரேஜ் கருவிகளைப் பயன்படுத்துதல்

Istanbul (nyc) அல்லது Mocha போன்ற கருவிகள் உங்கள் ஜாவாஸ்கிரிப்ட் சோதனைகளுக்கான குறியீடு கவரேஜ் அறிக்கைகளை உருவாக்கப் பயன்படுத்தப்படலாம்.

குறியீடு கவரேஜ் அறிக்கைகளை உருவாக்குவதற்கான படிகள்:

1. ஒரு குறியீடு கவரேஜ் கருவியை நிறுவவும்: Istanbul அல்லது மற்றொரு குறியீடு கவரேஜ் கருவியை ஒரு வளர்ச்சி சார்புநிலையாக நிறுவவும்.
2. உங்கள் டெஸ்ட் ரன்னரை உள்ளமைக்கவும்: குறியீடு கவரேஜ் கருவியைப் பயன்படுத்த உங்கள் டெஸ்ட் ரன்னரை (எ.கா., Mocha, Jest) உள்ளமைக்கவும்.
3. உங்கள் சோதனைகளை இயக்கவும்: ஒரு குறியீடு கவரேஜ் அறிக்கையை உருவாக்க உங்கள் சோதனைகளை இயக்கவும்.
4. அறிக்கையைக் காட்சிப்படுத்தவும்: குறியீடு கவரேஜ் முடிவுகளைக் காட்சிப்படுத்தும் ஒரு HTML அறிக்கையை உருவாக்க `lcov-reporter` போன்ற ஒரு கருவியைப் பயன்படுத்தவும்.

Jest மற்றும் Istanbul-ஐப் பயன்படுத்தி எடுத்துக்காட்டு:

// package.json
{
  "scripts": {
    "test": "jest --coverage"
  }
}

4. ஒரு தனிப்பயன் டாஷ்போர்டை உருவாக்குதல்

கருவிகள் மற்றும் நுட்பங்களின் கலவையைப் பயன்படுத்தி நீங்கள் ஒரு தனிப்பயன் டாஷ்போர்டையும் உருவாக்கலாம்:

• தரவு சேகரிப்பு: குறியீட்டுத் தர அளவீடுகளைச் சேகரிக்க ESLint, குறியீடு கவரேஜ் கருவிகள் மற்றும் பிற நிலையான பகுப்பாய்வு கருவிகளைப் பயன்படுத்தவும்.
• தரவு சேமிப்பு: சேகரிக்கப்பட்ட தரவை ஒரு தரவுத்தளத்தில் அல்லது ஒரு கோப்பு முறைமையில் சேமிக்கவும்.
• தரவு காட்சிப்படுத்தல்: குறியீட்டுத் தர அளவீடுகளைக் காட்சிப்படுத்தும் ஊடாடும் வரைபடங்கள் மற்றும் வரைபடங்களை உருவாக்க Chart.js, D3.js, அல்லது Highcharts போன்ற ஒரு விளக்கப்பட நூலகத்தைப் பயன்படுத்தவும்.
• டாஷ்போர்டு கட்டமைப்பு: உங்கள் டாஷ்போர்டின் பயனர் இடைமுகத்தை உருவாக்க React, Angular, அல்லது Vue.js போன்ற ஒரு டாஷ்போர்டு கட்டமைப்பைப் பயன்படுத்தவும்.

Chart.js மற்றும் React-ஐப் பயன்படுத்தி எடுத்துக்காட்டு:

// React component
import React, { useEffect, useRef } from 'react';
import Chart from 'chart.js/auto';

const CodeCoverageChart = ({ coverageData }) => {
  const chartRef = useRef(null);

  useEffect(() => {
    const chartCanvas = chartRef.current.getContext('2d');
    new Chart(chartCanvas, {
      type: 'bar',
      data: {
        labels: ['Statements', 'Branches', 'Functions', 'Lines'],
        datasets: [{
          label: 'Coverage %',
          data: [coverageData.statements, coverageData.branches, coverageData.functions, coverageData.lines],
          backgroundColor: ['rgba(255, 99, 132, 0.2)', 'rgba(54, 162, 235, 0.2)', 'rgba(255, 206, 86, 0.2)', 'rgba(75, 192, 192, 0.2)'],
          borderColor: ['rgba(255, 99, 132, 1)', 'rgba(54, 162, 235, 1)', 'rgba(255, 206, 86, 1)', 'rgba(75, 192, 192, 1)'],
          borderWidth: 1,
        }],
      },
      options: {
        scales: {
          y: {
            beginAtZero: true,
            max: 100,
          },
        },
      },
    });
  }, [coverageData]);

  return ; // Use a React Fragment
};

export default CodeCoverageChart;

காலப்போக்கில் போக்குகளைக் காட்சிப்படுத்தல்

ஒரு குறியீட்டுத் தர டாஷ்போர்டின் முக்கிய நன்மை காலப்போக்கில் போக்குகளைக் கண்காணிக்கும் திறன் ஆகும். இது உங்கள் திட்டம் வளர்ச்சியடையும் போது உங்கள் குறியீட்டுத் தரம் எவ்வாறு மேம்படுகிறது அல்லது குறைகிறது என்பதைக் காண உங்களை அனுமதிக்கிறது. போக்குகளைக் காட்சிப்படுத்த, நீங்கள் வரலாற்றுத் தரவைச் சேமித்து, காலப்போக்கில் அளவீடுகள் எவ்வாறு மாறுகின்றன என்பதைக் காட்டும் விளக்கப்படங்களை உருவாக்க வேண்டும்.

உதாரணம்: கடந்த ஆண்டில் ஒரு குறிப்பிட்ட மாட்யூலின் சைக்ளோமேடிக் சிக்கலான தன்மையைக் காட்டும் ஒரு கோட்டு விளக்கப்படத்தை உருவாக்கவும். சிக்கலான தன்மை அதிகரித்து வந்தால், அந்த மாட்யூலை மறுசீரமைக்க வேண்டும் என்பதைக் குறிக்கலாம்.

செயல்படக்கூடிய நுண்ணறிவுகள் மற்றும் பரிந்துரைகள்

ஒரு குறியீட்டுத் தர டாஷ்போர்டு செயல்படக்கூடிய நுண்ணறிவுகள் மற்றும் பரிந்துரைகளுக்கு வழிவகுத்தால் மட்டுமே பயனுள்ளதாக இருக்கும். டாஷ்போர்டு கண்காணிக்கப்படும் அளவீடுகளின் அடிப்படையில் குறியீட்டுத் தரத்தை எவ்வாறு மேம்படுத்துவது என்பது குறித்த தெளிவான வழிகாட்டலை வழங்க வேண்டும்.

செயல்படக்கூடிய நுண்ணறிவுகளின் எடுத்துக்காட்டுகள்:

• குறைந்த குறியீடு கவரேஜ்: குறிப்பிட்ட மாட்யூல்கள் அல்லது ஃபங்ஷன்களுக்கான சோதனை கவரேஜை அதிகரிக்கவும்.
• அதிக சைக்ளோமேடிக் சிக்கலான தன்மை: சிக்கலான தன்மையைக் குறைக்க சிக்கலான ஃபங்ஷன்களை மறுசீரமைக்கவும்.
• குறியீடு நகல்: நகல் எடுக்கப்பட்ட குறியீட்டை மறுபயன்பாட்டு ஃபங்ஷன்களாக பிரித்தெடுக்கவும்.
• பாதுகாப்பு பாதிப்புகள்: பாதிப்புக்குள்ளான சார்புநிலைகளைப் புதுப்பிக்கவும் அல்லது உங்கள் குறியீட்டில் உள்ள பாதுகாப்பு குறைபாடுகளை சரிசெய்யவும்.

ஒரு குறியீட்டுத் தர டாஷ்போர்டைப் பராமரிப்பதற்கான சிறந்த நடைமுறைகள்

உங்கள் குறியீட்டுத் தர டாஷ்போர்டு பயனுள்ளதாக இருப்பதை உறுதிசெய்ய, இந்த சிறந்த நடைமுறைகளைப் பின்பற்றவும்:

• பகுப்பாய்வை தானியக்கமாக்குங்கள்: குறியீடு மாற்றப்படும் போதெல்லாம் தானாக அறிக்கைகளை உருவாக்க உங்கள் உருவாக்க செயல்முறையில் குறியீட்டுத் தர பகுப்பாய்வை ஒருங்கிணைக்கவும்.
• இலக்குகள் மற்றும் குறிக்கோள்களை அமைக்கவும்: முன்னேற்றத்தைக் கண்காணிக்கவும் மற்றும் வெற்றியை அளவிடவும் குறியீட்டுத் தர அளவீடுகளுக்கான குறிப்பிட்ட இலக்குகள் மற்றும் குறிக்கோள்களை வரையறுக்கவும்.
• டாஷ்போர்டை தவறாமல் மதிப்பாய்வு செய்யவும்: சிக்கல்களை அடையாளம் காணவும் மற்றும் உங்கள் இலக்குகளை நோக்கிய முன்னேற்றத்தைக் கண்காணிக்கவும் டாஷ்போர்டின் வழக்கமான மதிப்பாய்வுகளைத் திட்டமிடவும்.
• முடிவுகளைத் தெரிவிக்கவும்: வெளிப்படைத்தன்மை மற்றும் ஒத்துழைப்பை ஊக்குவிக்க மேம்பாட்டுக் குழு மற்றும் பங்குதாரர்களுடன் டாஷ்போர்டைப் பகிரவும்.
• தொடர்ந்து மேம்படுத்தவும்: மிகவும் பொருத்தமான மற்றும் செயல்படக்கூடிய தகவல்களை வழங்குவதை உறுதிசெய்ய உங்கள் டாஷ்போர்டை தொடர்ந்து மதிப்பீடு செய்து மேம்படுத்தவும்.

முடிவுரை

ஒரு ஜாவாஸ்கிரிப்ட் குறியீடு தர டாஷ்போர்டு உங்கள் குறியீட்டுத் தளத்தின் தரம், பராமரிப்புத்தன்மை மற்றும் பாதுகாப்பை மேம்படுத்துவதற்கான ஒரு விலைமதிப்பற்ற கருவியாகும். முக்கிய அளவீடுகளைக் கண்காணிப்பதன் மூலமும், போக்குகளைக் காட்சிப்படுத்துவதன் மூலமும், செயல்படக்கூடிய நுண்ணறிவுகளை வழங்குவதன் மூலமும், நன்கு வடிவமைக்கப்பட்ட டாஷ்போர்டு உங்கள் குழு சிறந்த மென்பொருளை விரைவாக உருவாக்க உதவும். நீங்கள் SonarQube போன்ற ஒரு தளத்தைப் பயன்படுத்தத் தேர்வுசெய்தாலும், லின்டர்கள் மற்றும் குறியீடு கவரேஜ் கருவிகளைப் பயன்படுத்தினாலும், அல்லது ஒரு தனிப்பயன் டாஷ்போர்டை உருவாக்கினாலும், முக்கியமானது என்னவென்றால், உங்கள் மேம்பாட்டு செயல்முறையில் குறியீட்டுத் தர பகுப்பாய்வை ஒருங்கிணைத்து அதை ஒரு தொடர்ச்சியான முயற்சியாக மாற்றுவதாகும்.